#新しいチャート
Chart.js 2.0 では、各データセットのコントローラーの概念が導入されました。スケールと同様に、新しいコントローラーも必要に応じて作成できます。
class MyType extends Chart.DatasetController {
}
Chart.register(MyType);
// Now we can create a new instance of our chart, using the Chart.js API
new Chart(ctx, {
// this is the string the constructor was registered at, ie Chart.controllers.MyType
type: 'MyType',
data: data,
options: options
});
#データセット コントローラー インターフェイス
データセット コントローラーは次のインターフェイスを実装する必要があります。
{
// Defaults for charts of this type
defaults: {
// If set to `false` or `null`, no dataset level element is created.
// If set to a string, this is the type of element to create for the dataset.
// For example, a line create needs to create a line element so this is the string 'line'
datasetElementType: string | null | false,
// If set to `false` or `null`, no elements are created for each data value.
// If set to a string, this is the type of element to create for each data value.
// For example, a line create needs to create a point element so this is the string 'point'
dataElementType: string | null | false,
}
// ID of the controller
id: string;
// Update the elements in response to new data
// @param mode : update mode, core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`
update: function(mode) {}
}
次のメソッドは、必要に応じて、派生データセット コントローラーによってオーバーライドできます。
{
// Draw the representation of the dataset. The base implementation works in most cases, and an example of a derived version
// can be found in the line controller
draw: function() {},
// Initializes the controller
initialize: function() {},
// Ensures that the dataset represented by this controller is linked to a scale. Overridden to helpers.noop in the polar area and doughnut controllers as these
// chart types using a single scale
linkScales: function() {},
// Parse the data into the controller meta data. The default implementation will work for cartesian parsing, but an example of an overridden
// version can be found in the doughnut controller
parse: function(start, count) {},
}
#既存のグラフ タイプの拡張
既存のコントローラ タイプの拡張や置き換えは簡単です。組み込み型のいずれかのコンストラクターを独自のものに置き換えるだけです。
組み込みコントローラーのタイプは次のとおりです。
BarControllerBubbleControllerDoughnutControllerLineControllerPieControllerPolarAreaControllerRadarControllerScatterController
これらのコントローラーは、UMD パッケージの直下でも入手できます。Chart。例えば：Chart.BarController。
たとえば、バブル チャートから拡張された新しいチャート タイプを派生するには、次の手順を実行します。
import {BubbleController} from 'chart.js';
class Custom extends BubbleController {
draw() {
// Call bubble controller method to draw all the points
super.draw(arguments);
// Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
const meta = this.getMeta();
const pt0 = meta.data[0];
const {x, y} = pt0.getProps(['x', 'y']);
const {radius} = pt0.options;
const ctx = this.chart.ctx;
ctx.save();
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.strokeRect(x - radius, y - radius, 2 * radius, 2 * radius);
ctx.restore();
}
};
Custom.id = 'derivedBubble';
Custom.defaults = BubbleController.defaults;
// Stores the controller so that the chart initialization routine can look it up
Chart.register(Custom);
// Now we can create and use our new chart type
new Chart(ctx, {
type: 'derivedBubble',
data: data,
options: options
});
#TypeScript の入力
新しいグラフの種類を静的に型指定したい場合は、.d.tsTypeScript 宣言ファイル。 Chart.js は、「宣言のマージ」の概念を使用して、組み込み型をユーザー定義型で拡張する方法を提供します。
新しいグラフの種類を追加する場合、ChartTypeRegistryの既存のエントリを拡張することによって、新しい型の宣言を含める必要があります。ChartTypeRegistryまたは新しいものを作成します。
たとえば、バブル チャートから拡張された新しいチャート タイプの型指定を提供するには、.d.ts含まれるもの:
import { ChartTypeRegistry } from 'chart.js';
declare module 'chart.js' {
interface ChartTypeRegistry {
derivedBubble: ChartTypeRegistry['bubble']
}
}